<template>
    <div class="shopping">
        <!-- 搜索 -->
        <div class="search">
            <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" @focus="toCearch" />
        </div>
        <div class="top-tabs">
            <van-tabs color="#1ba784" @click="setProductsId" :sticky="true">
                <van-tab v-for="i in mainList" :title="i.title" :key="i._system_record_entry_id" :name="i.miniWallkey">
                    <div class="loading" v-if="!productsArr">
                        <van-loading type="spinner" />
                    </div>
                    <div class="products" v-else>
                        <ProductC v-for="(item, index) in productsArr" :key="index" :item="item" />
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
import { getMainList } from "@/api/api";
import { getProducts } from "@/api/api";
import ProductC from "@/components/ProductC.vue";
export default {
    data() {
        return {
            mainList: [],
            // active: 1,
            value: "",
            productsId: 0,
            productsPage: 1,
            productsArr: [],
        };
    },
    components: {
        ProductC,
    },
    async mounted() {
        await this.getMainListApi();
        this.productsId = this.mainList[0].miniWallkey;
        this.getProductsApi();
    },
    methods: {
        getMainListApi() {
            return this.axios(getMainList()).then(({ data }) => {
                this.mainList = data.data["117330"].list;
            });
        },
        async getProductsApi() {
            let { data } = await this.axios(getProducts(this.productsId, this.productsPage));
            this.productsArr = data.result.wall.docs;
        },
        toCearch() {
            this.$router.push({ name: "search" });
        },
        setProductsId(name) {
            this.productsId = name;
        },
    },
    watch: {
        productsId(newId, oldId) {
            if (newId != oldId) {
                this.productsArr = "";
                this.getProductsApi();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.loading {
    position: fixed;
    left: 50vw;
    top: 50vh;
    transform: translate(-50%, -50%);
}
.products {
    width: 100vw;
    box-sizing: border-box;
    padding: 2vh 5vw;
    border-radius: 20px;
    background-color: #f8f8f8;
    column-count: 2;

    .product {
        background-color: #fff;
        width: 43vw;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 2vh;
        .product-img {
            width: 100%;
            img {
                width: 100%;
            }
        }
        .product-describe {
            width: 100%;
            height: 5rem;
            padding: 0 1vw;
            box-sizing: border-box;
            .product-title {
                font-size: 16px;
                font-weight: 600;
                line-height: 20px;
                margin-bottom: 1vh;
            }
            .product-price {
                display: flex;
                justify-content: space-between;
                .p-price {
                    font-size: 18px;
                    font-weight: 600;
                    color: red;
                }
                .p-sale {
                    font-size: 14px;
                    color: rgba($color: #000000, $alpha: 0.7);
                }
            }
        }
    }
}
</style>
